<template>
  <el-tabs type="border-card" style="heigt: 100%">
    <!-- 第一组查询 刷卡记录查询 -->
    <el-tab-pane label="查询人员卡片列表">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleCardPageAccreditForm()"
          type="primary"
          size="small"
        >
          查询列表
        </el-button>
      </div>
      <!-- 第一组查询 刷卡记录查询  表单部分-->
      <el-form
        inline
        v-model="cardPageAccreditForm"
        size="small"
        label-width="140px"
        style="margin-top: 15px"
      >
        <el-form-item label="人员姓名">
          <el-input
            v-model="cardPageAccreditForm.ownerLikeStr"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input
            v-model="cardPageAccreditForm.cardNumberLikeStr"
            style="width: 203px"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否授权">
          <el-select
            v-model="cardPageAccreditForm.isAccredit"
            placeholder="请选择"
            style="width: 203px"
            >>
            <el-option
              v-for="item in isAccreditOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!--第一组查询 刷卡记录查询  结果显示   -->
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 记录列表</span>
        <el-table
          :data="cardPageAccreditResult"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed label="卡片id">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="卡号">
            <template slot-scope="scope">
              {{ scope.row.cardNumber }}
            </template>
          </el-table-column>
          <el-table-column label="assistCount">
            <template slot-scope="scope">
              {{ scope.row.assistCount }}
            </template>
          </el-table-column>
          <el-table-column label="卡状态">
            <template slot-scope="scope">
              {{ scope.row.cardStateStr }}
            </template>
          </el-table-column>
          <el-table-column label="卡类型">
            <template slot-scope="scope">
              {{ scope.row.cardType }}
            </template>
          </el-table-column>
          <el-table-column label="卡片类型">
            <template slot-scope="scope">
              {{ scope.row.cardTypeStr }}
            </template>
          </el-table-column>
          <el-table-column label="所属人名称">
            <template slot-scope="scope">
              {{ scope.row.ownwerName }}
            </template>
          </el-table-column>
          <el-table-column label="所属人id">
            <template slot-scope="scope">
              {{ scope.row.ownwerId }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间">
            <template slot-scope="scope">
              {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="是否授权">
            <template slot-scope="scope">
              {{ scope.row.isAccredit }}
            </template>
          </el-table-column>
          <el-table-column label="开始时间">
            <template slot-scope="scope">
              {{ scope.row.startDate }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.state }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>

    <!--  -->

    <el-tab-pane label="查询人员信息列表">
      <div>
        <i class="el-icon-search"></i>
        <span>认证记录</span>
        <el-button
          style="float: right; margin-bottom: 15px; margin-right: 15px"
          @click="handleUserPageOwnerForm()"
          type="primary"
          size="small"
        >
          查询列表
        </el-button>
      </div>
      <div>
        <el-form
          inline
          v-model="UserPageOwnerForm"
          size="small"
          label-width="140px"
          style="margin-top: 15px"
        >
          <el-form-item label="人员姓名">
            <el-input
              v-model="UserPageOwnerForm.cardNameLikeStr"
              style="width: 203px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 第二组查询 结果显示 -->
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 记录列表</span>
        <el-table
          :data="UserPageOwnerResult"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed label="人员id">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              {{ scope.row.owner }}
            </template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{ scope.row.ownerSex }}
            </template>
          </el-table-column>
          <el-table-column label="人员编码">
            <template slot-scope="scope">
              {{ scope.row.ownerCode }}
            </template>
          </el-table-column>
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              {{ scope.row.ownerTel }}
            </template>
          </el-table-column>
          <el-table-column label="证件号码">
            <template slot-scope="scope">
              {{ scope.row.identityCard }}
            </template>
          </el-table-column>
          <el-table-column label="orgCode">
            <template slot-scope="scope">
              {{ scope.row.orgCode }}
            </template>
          </el-table-column>
          <el-table-column label="面部认证">
            <template slot-scope="scope">
              {{ scope.row.faceAccredit }}
            </template>
          </el-table-column>
          <el-table-column label="指纹认证">
            <template slot-scope="scope">
              {{ scope.row.fingerAccredit }}
            </template>
          </el-table-column>
          <el-table-column label="指纹编码">
            <template slot-scope="scope">
              {{ scope.row.fingerCode }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="是否有效">
            <template slot-scope="scope">
              {{ scope.row.isValid }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
    <!-- 第三组查询 可视对讲设备通话记录 -->
    <el-tab-pane label="查询卡片列表">
      <div>
        <i class="el-icon-search"></i>
        <span>认证记录</span>
        <el-button
          style="float: right; margin-bottom: 15px; margin-right: 15px"
          @click="handleCardListUserIdForm()"
          type="primary"
          size="small"
        >
          查询记录
        </el-button>
      </div>
      <div>
        <el-form
          inline
          v-model="cardListUserIdForm"
          size="small"
          label-width="140px"
          style="margin-top: 15px"
        >
          <el-form-item label="人员姓名">
            <el-input
              v-model="cardListUserIdForm.ownerLikeStr"
              style="width: 203px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!--  结果显示 -->
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 记录列表</span>
        <el-table
          :data="cardListUserIdResult"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed label="卡号">
            <template slot-scope="scope">
              {{ scope.row.cardNumber }}
            </template>
          </el-table-column>
          <el-table-column label="卡id">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="所属人员id">
            <template slot-scope="scope">
              {{ scope.row.ownerId }}
            </template>
          </el-table-column>
          <el-table-column label="所属人员姓名">
            <template slot-scope="scope">
              {{ scope.row.ownerName }}
            </template>
          </el-table-column>
          <el-table-column label="卡状态">
            <template slot-scope="scope">
              {{ scope.row.cardStateStr }}
            </template>
          </el-table-column>
          <el-table-column label="卡类型">
            <template slot-scope="scope">
              {{ scope.row.cardTypeStr }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间">
            <template slot-scope="scope">
              {{ scope.row.endTime }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      cardPageAccreditForm: {
        //刷卡记录查询的表单
        ownerLikeStr: undefined,
        cardNumLikeStr: undefined,
        isAccredit: undefined,
      },
      cardPageAccreditResult: null,

      isAccreditOptions: [
        {
          value: "0",
          label: "未授权",
        },
        {
          value: "1",
          label: "已授权",
        },
      ],
      UserPageOwnerForm: {
        ownerNameLikeStr: undefined,
      },
      UserPageOwnerResult: [
        {
          certificateType: "20",
          createTime: "2019-07-21 22:24:46",
          draw: 0,
          faceAccredit: 0,
          fingerAccredit: 0,
          fingerCode: "487945",
          id: 1,
          identityCard: "123",
          isValid: 0,
          orgCode: "009",
          owner: "123",
          ownerCode: "123",
          ownerSex: 1,
          ownerTel: "17568153165",
          status: 1,
        },
      ],
      cardListUserIdForm: {
        ownerLikeStr: undefined,
      },
      cardListUserIdResult: [
        {
          assistConut: 0,
          cardNumber: "A1234567",
          cardStateStr: "正常",
          cardType: "0",
          cardTypeStr: "普通卡",
          createTime: "2019-07-22",
          endDate: "2029-07-22",
          id: 1,
          isAccredit: 0,
          ownerId: "1",
          ownerName: "123",
          startDate: "2019-07-22",
          state: "0",
        },
      ],

      isShowSwingCardRecordResult: false,
      isDialogShow: false,

      cardSolutionIntegrateForm: [
        {
          compareResult: "",
          deviceName: "",
          personName: "",
          pageNum: 1,
          pageSize: 20,
          startTime: "",
          endTime: "",
        },
      ],

      logTalkForm: {
        pageNum: 1,
        pageSize: 20,
        callNum: "",
        endState: 0,
        callType: 0,
        startTime: "",
        endTime: "",
      },
      logTalkResult: {},
    }; // return's }
  },
  methods: {
    handleCardPageAccreditForm() {
      this.isShowSwingCardRecordResult = true;
    },
    handleUserPageOwnerForm() {
      this.isDialogShow = true;
    },
    handleCardListUserIdForm() {},
  },
};
</script>

<style scoped>
</style>